<template>
	<div class="login">
		<div class="login-block">
			<div class="login-entry">
				<div class="admin-login-title" id="adminLogin">CC-Video后台管理系统</div>
			</div>

			<div class="login-form">
				<el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="70px" class="login-box">
					<el-form-item label="工号" prop="memberNum">
						<el-input prefix-icon="el-icon-user-solid" type="text" maxlength="13" placeholder="请输入工号"
							v-model="loginForm.memberNum" />
					</el-form-item>

					<el-form-item label="密码" prop="password">
						<el-input prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" maxlength="20"
							v-model="loginForm.password" />
					</el-form-item>

					<el-form-item label="验证码" prop="code">
						<el-input type="password" style="width: 47%;margin-right: 10px;" placeholder="请输入验证码" maxlength="4"
							v-model="loginForm.code" />
						<el-image class="codeImg" @click="getCaptcha()" :src="codeImgSrc" title="看不清?刷新试试"></el-image>
					</el-form-item>

					<el-form-item>
						<el-button :loading="loginLoading" type="primary" class="login-button"
							v-on:click="handleLogin('loginForm')">
							<span v-if="!loginLoading">登 录</span>
							<span v-else>登 录 中...</span>
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getCaptchaImg
} from '@/api/user';

export default {
	name: "Login",
	data() {
		return {
			codeImgSrc: '',
			loginLoading: false,
			loginForm: {
				memberNum: '',
				password: '',
				code: '',
				uuid: '',
				loginType: 'admin'
			},

			rules: {
				memberNum: [{
					required: true,
					message: '工号不可为空',
					trigger: 'blur'
				}],
				password: [{
					required: true,
					message: '密码不可为空',
					trigger: 'blur'
				}],
				code: [{
					required: true,
					message: '验证码不可为空',
					trigger: 'blur'
				}]
			}
		}
	},
	created() {
		this.getCaptcha();
	},
	methods: {
		getCaptcha() {
			getCaptchaImg().then(res => {
				this.codeImgSrc = "data:image/gif;base64," + res.img;
				this.loginForm.uuid = res.uuid;
			});
		},

		handleLogin(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loginLoading = true;
					this.$store.dispatch("Login", this.loginForm).then(() => {
						this.$message.success("登录成功！");
						this.$router.push("/").catch(() => { });
					}).catch(() => {
						this.loginLoading = false;
						this.getCaptcha();
						return false;
					})
				} else {
					this.loginLoading = false;
					return false;
				}
			});
		}
	}
}
</script>

<style lang="scss" scope>
body {
	background-color: #F3F3F3
}

.login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}

.login-block {
	width: 550px;
	height: 350px;
	border: 1px solid #DCDFE6;
	border-radius: 5px;
	-webkit-border-radiuis: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0 0 25px #909399;
	background: #FFFFFF;
}

.login-entry {
	width: 100%;
	height: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}


.admin-login-title {
	margin: 10px 10px 0 10px;
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 2px;
	cursor: default;
}

.login-form {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 3%;
	padding-right: 8%;
}

.codeImg {
	width: 47%;
	height: 40px;
	vertical-align: middle;
}

.codeImg:hover {
	cursor: pointer;
}

.login-button {
	width: 300px;
}
</style>
